<template>
  <div>
    <el-timeline>
      <el-timeline-item v-for="item,index in leaveMsg" :timestamp="item.createTime" :key="index" placement="top">
        <el-card>
          {{item.content.replace(/<[^<>]+>/g,'')}}
        </el-card>
      </el-timeline-item>
      <el-button v-if="hasNext" size="mini" round icon="el-icon-arrow-down" @click="loadMoreMsg()">加载更多</el-button>
      <span v-else>没有更多了</span>
    </el-timeline>

  </div>
</template>

<script>
  import {
    list,
    listWithId
  } from '@/api/LeaveMsg.js'

  export default {
    data() {
      return {
        numberOfPage: 10,
        minId: 0,
        hasNext: true,
        leaveMsg: []
      }
    },

    methods: {
      // 加载下一页
      loadMoreMsg() {
        var that = this

        listWithId(this.minId, this.numberOfPage).then((resp) => {
          that.leaveMsg = that.leaveMsg.concat(resp.data)
          var length = resp.data.length
          if (length == 0) {
            that.minId = 1
            that.hasNext = false
            return;
          }
          that.minId = resp.data[length - 1].id
        }).catch((error) => {
          console.log(error)
          this.$router.push('/error')
        })

      }
    },

    mounted() {
      // 初始化发言板内容
      var that = this

      list(this.numberOfPage).then(resp => {
        if (resp.data.length == 0) {
          this.$message("暂无更多信息")
          that.hasNext = false
          return
        }

        that.leaveMsg = resp.data
        var length = resp.data.length
        that.minId = resp.data[length - 1].id
      }).catch(error => {
        console.log(error)
        this.$router.push('/error')
      })

    }
  }
</script>

<style>
  /*  el-timeline-item {
    background-color: rgb(0, 0, 0);
  }

  el-timeline {
    background-color: rgb(0, 0, 0);
  }
 */
  .el-timeline-item__timestamp.is-top {
    /* 时间字体为黑色 */
    color: black;
  }
</style>
